<template>
  <div id="container">
    <Header></Header>

    <div class="outer row" style="margin: 0 auto">
      <!--新布局-->

      <!-- 左侧主体内容 -->
      <section class="col-lg-9">

        <!-- 第一行 -->
        <div class="row">
          <!-- 首页轮播 -->
          <div class="col-md-8">
            <el-carousel :interval="5000" arrow="always" :height="bannerHeight +'px'">
              <el-carousel-item v-for="item in imagesUrls" :key="item.id">
                <div class="index-banner">
                  <a href="" target="_blank">
                    <img ref="bannerHeight" :src="item.url" @load="imageLoad"
                         style="width: 100%;"/></a>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="col-md-4">

            <div class="index-banner">
              <a href="" target="_blank">
                <img src="../../assets/adv/springboot-1.png" style="width: 100%;"/>
              </a>
            </div>
            <div style="height: 10px">

            </div>
            <div class="index-banner">
              <a href="" target="_blank">
                <img src="../../assets/adv/springcloud1-3.png" style="width: 100%;"/>
              </a>
            </div>

          </div>
        </div>
        <!--最新发布-->
        <NewsArticles :articles="newArticles"></NewsArticles>
        <spring></spring>
        <geotrellis></geotrellis>
        <!--
                <Desgin></Desgin>
        -->
        <!--
                <others></others>
        -->

        <div class="row adv">
          <div class="col-md-12">
            <div style="width:100%;text-align: center;clear: both;margin-bottom: 20px;" class="hidden-xs">
              <ins class="adsbygoogle"
                   style="display:block"
                   data-ad-client="ca-pub-8254913025324557"
                   data-ad-slot="3369473724"
                   data-ad-format="auto"></ins>
              <!--     &lt;!&ndash;<script>
                      (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>&ndash;&gt;-->
            </div>
          </div>
        </div>
        <!-- <script type="application/javascript">
              $('.carousel').carousel()
            </script>-->
      </section>
      <Aside></Aside>
      <!--布局左侧栏侧栏-->
      <foot></foot>

    </div>
  </div>
</template>

<script>
  import Aside from '../../components/aside/Aside'
  import Header from '../../components/header/Header'
  import Foot from '../../components/foot/Foot'
  import NewsArticles from './components/NewArticles'
  import Spring from './components/Spring'
  import Geotrellis from './components/Geotrellis'
  import {getArticles, getHotArtices, getNewArtices, articleList} from '@/api/article'

  export default {

    components: {Header, Aside, Foot, NewsArticles, Spring, Geotrellis},
    created() {
      this.getNewArtices();
    },
    data() {
      return {
        bannerHeight: "",
        listQuery: {
          keyword: null,
          pageNum: 1,
          pageSize: 10,

        },
        imagesUrls: [
          {id: 0, url: require('../../assets/adv/springboot-1.png')},

          {id: 1, url: require('../../assets/adv/springcloud1-2.png')},
          {id: 2, url: require('../../assets/adv/springcloud1-3.png')},
        ],
        newArticles: [],
        springBoots: [],
        springClouds:[],
      }
    },
    mounted() {
      this.imageLoad();
      window.addEventListener('resize', () => {
        this.bannerHeight = this.$refs.bannerHeight[0].height;
        this.imageLoad();
      }, false)
    },
    methods: {
      imageLoad() {
        this.$nextTick(() => {
          this.bannerHeight = this.$refs.bannerHeight[0].height

        })
      },

      getNewArtices() {
        let that = this;
        getNewArtices().then(data => {
          that.newArticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '最新文章加载失败!', showClose: true})
          }

        })

      },
      getSpringBoots() {
        this.listQuery.categoryName = 'springBoot';
        articleList(this.listQuery).then(res => {
          this.springBoots = res.data.list
        })

      },
      getSpringClouds() {
        this.listQuery.categoryName = 'springCloud';
        articleList(this.listQuery).then(res => {
          this.springClouds = res.data.list;
          console.log("s=>>" + this.springClouds)
        })

      }
    }
  }
</script>


<style type="text/css">
  pre {
    color: inherit;
    background-color: inherit;
  }
</style>

<style>

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 100%;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  /*.el-carousel__item h3 {
    height: 100%;
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    margin: 0;
  }*/

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .row {
    margin-top: 15px;
  }

  .index-card {
    padding: 15px;
    background: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

  .index-card-head {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eceff2;
    color:#1a1a1a;
  }

  .index-card-body {

  }

  .index-card-body-list {
    display: block;
    margin-bottom: 7px;
    justify-content: space-between;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .index-card-body-list a {
    color: grey;
    font-size: 15px;
    width: 80%;
  }

  .index-card-body-list a:hover {
    color: dodgerblue;
  }

  .index-banner {
  }

  .media-body p {
    font-size: 13px;
    color: grey;
  }

</style>
